<script setup lang="ts">
import {
  getMaterialList,
  getSetmeal,
  delGoods,
  Ivacc,
  getVacc,
} from "../../api/epi";
import { ref, onMounted, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "../../store/user";
const { userid } = useUserStore();
const materialList = ref<any>([]);
const setmeal = ref([]);
const getVaccList = ref<Ivacc[]>([]);
const getNowDate = () => {
  const timeOne = new Date();
  const year = timeOne.getFullYear();
  let month: any = timeOne.getMonth() + 1;
  let day: any = timeOne.getDate();
  month = month < 10 ? "0" + month : month;
  day = day < 10 ? "0" + day : day;
  const NOW_MONTHS_AGO = `${year}-${month}-${day}`;
  return NOW_MONTHS_AGO;
};
const nowTime = getNowDate();
const form = ref<any>({
  userid: userid,
  goodsname: "",
  date: nowTime,
  applynum: "",
});

const getVaccs = async () => {
  console.log(form, "from");
  let res = await getVacc(form.value);
  console.log(res, "res");
  getVaccList.value = res.data;
  form.value = {
    userid: undefined,
    goodsname: "",
    date: nowTime,
    applynum: "",
  };
  getSetme();
};
const getSetme = async () => {
  let res = await getSetmeal({userid});
  setmeal.value = res.data;
  console.log(res, "setmeal");
};
const value1 = ref("");
const getMaterial = async () => {
  let res = await getMaterialList();
  materialList.value = res.data;
  console.log(res, "materialList");
};

const del = async (id: any) => {
  ElMessageBox.confirm("确定删除吗", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await delGoods(id);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      getSetme();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

onMounted(() => {
  getMaterial();
  getSetme();
});
</script>
<template>
  <div class="box">
    <h2>物资申请</h2>
    <div>
      <el-select
        v-model="form.goodsname"
        class="m-2"
        placeholder="套餐选择"
        size="large"
      >
        <el-option
          v-for="item in materialList"
          :key="item.id"
          :label="item.goodsname + '' + item.supplier"
          :value="item.goodsname + '' + item.supplier"
        />
      </el-select>

      <input
        type="text"
        v-model="form.applynum"
        placeholder="数量"
        class="num"
      />

      <el-date-picker
        v-model="form.date"
        type="datetime"
        placeholder="申请日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        style="margin-right: 10px"
      />

      <el-button type="danger" @click="getVaccs">申请</el-button>
    </div>
    <div class="mes">
      <h2>申请信息</h2>
      <el-table :data="setmeal" stripe style="width: 100%">
        <el-table-column label="物资名称" width="180">
          <template #default="scoped">
            <span>{{ scoped.row.goodsname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请日期">
          <template #default="scoped">
            <span>{{ scoped.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请数量">
          <template #default="scoped">
            <span>{{ scoped.row.applynum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="删除">
          <template #default="scoped">
            <el-button type="danger" @click="del(scoped.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.num {
  margin-left: 10px;
  margin-right: 10px;
  width: 50px;
  height: 20px;
  text-align: center;
}
.mes {
  margin-top: 20px;
}
</style>
